import React from "react";
import styles from "./Index.module.css";
import Mynao from "../../components/Mynao/Index";
import PatientSelector from "../../components/PatientSelector/Index";
import { Avatar, CapsuleTabs } from "antd-mobile";
function Index() {
  return (
    <div className={styles.houzq}>
      <div className={styles.nav}>
        <Mynao title="候诊查询" />
      </div>

      <div className={styles.tiao}>
        <PatientSelector />
      </div>

      <div className={styles.tab}>
        <CapsuleTabs>
          <CapsuleTabs.Tab title="候诊(接诊)" key="fruits">
            <div className={styles.fang}>

              <div className={styles.shang}>

                <div className={styles.wen}>
                  <Avatar
                    src=""
                    style={{ "--border-radius": "50%", marginTop: "-7px" }}
                  />
                </div>


                <div>

                    <div style={{ marginLeft: "10px", marginTop: "10px", fontWeight: "bold",fontSize: "16px"}}>
                        刘医生
                        <span style={{fontWeight: "normal",fontSize:'13px',marginLeft:'10px'}}>主任医师</span>
                    </div>
                    <div style={{marginLeft:'10px',marginTop:'10px'}}>
                        门外诊一科<span style={{marginLeft:'10px'}}>
                            四川省保健院南苑
                        </span>
                    </div>
                </div>
              </div>


              <div className={styles.xia}>

                <div className={styles.yunak}>
                    <div className={styles.zi}>当前接诊号
                        <span style={{marginLeft:'10px',fontSize:'20px'}}>15</span>
                    </div>
                </div>
                

                <div>
                    <div className={styles.zii}>查看排队情况{'>'}</div>
                </div>
                
              </div>

            </div>


          <div className={styles.fang}>

              <div className={styles.shang}>

                <div className={styles.wen}>
                  <Avatar
                    src=""
                    style={{ "--border-radius": "50%", marginTop: "-7px" }}
                  />
                </div>


                <div>

                    <div style={{ marginLeft: "10px", marginTop: "10px", fontWeight: "bold",fontSize: "16px"}}>
                        刘医生
                        <span style={{fontWeight: "normal",fontSize:'13px',marginLeft:'10px'}}>主任医师</span>
                    </div>
                    <div style={{marginLeft:'10px',marginTop:'10px'}}>
                        门外诊一科<span style={{marginLeft:'10px'}}>
                            四川省保健院南苑
                        </span>
                    </div>
                </div>
              </div>


              <div className={styles.xia}>

                <div className={styles.yunak}>
                    <div className={styles.zi}>当前接诊号
                        <span style={{marginLeft:'10px',fontSize:'20px'}}>15</span>
                    </div>
                </div>
                

                <div>
                    <div className={styles.zii}>查看排队情况{'>'}</div>
                </div>
                
              </div>

            </div>

          </CapsuleTabs.Tab>

          <CapsuleTabs.Tab title="检查" key="vegetables">
            西红柿
          </CapsuleTabs.Tab>

          <CapsuleTabs.Tab title="取药" key="animals">
            蚂蚁
          </CapsuleTabs.Tab>
        </CapsuleTabs>
      </div>
    </div>
  );
}

export default Index;
